/* ===================================================== */
/*                 تنظیمات کلی صفحه داشبورد               */
/* ===================================================== */

html{

    height:100%;

    overflow:hidden;
}

body{

    margin:0;

    min-height:100%;

    /* هیچ‌وقت نباید خودِ body اسکرول بخوره — همه‌ی این صفحه‌ها طوری طراحی شدن که
       فقط یه ناحیه‌یِ داخلی (مثلاً .set-app یا .edu-hub-card) اسکرول می‌کنه، نه
       کلِ صفحه. اگه body اسکرول‌بار بگیره (حتی با ۱px سرریزِ ناخواسته)، مرورگر
       یه نواری از عرضِ صفحه رو برایِ اسکرول‌بار رزرو می‌کنه و همه‌چی، مخصوصاً
       نمودار در حالتِ تمام‌صفحه، به همون اندازه جمع‌تر می‌شه */
    overflow:hidden;

    background:var(--jn-bg-0);

    color:var(--jn-text-1);

    font-family:'Vazirmatn',sans-serif;

    line-height:1.7;
}

/* آزمایشیِ «جهتِ G3»: علاوه‌بر لکه‌های رنگیِ محو، خودِ رنگِ پایه‌ی صفحه (نه فقط تزئین)    */
/* یه‌کم تیره‌تر/پررنگ‌تر شده (#dbe1f0 به‌جایِ jn-bg-1 که تقریباً سفیده) — چون همه‌جا زیرِ  */
/* هر چیزِ دیگه‌ایه، همین یکی خودِ حسِ «سفیدیِ» کلی رو کم می‌کنه، نه فقط گوشه‌ها رو */
:root[data-theme="light"] body{
    background:
        radial-gradient(900px 600px at 6% -8%, rgba(0,194,214,.3), transparent 60%),
        radial-gradient(900px 600px at 100% 108%, rgba(124,58,237,.26), transparent 60%),
        #dbe1f0;
}

*{

    box-sizing:border-box;
}


/* ===================================================== */
/*                  اسکرول‌بار سفارشی                     */
/* ===================================================== */

::-webkit-scrollbar{

    width:6px;
}

::-webkit-scrollbar-thumb{

    background:rgba(var(--jn-cyan-rgb),.25);

    border-radius:6px;
}


/* ===================================================== */
/*                  قاب اصلی داشبورد                      */
/*        (کل صفحه در یک نما، بدون اسکرول کلی)            */
/* ===================================================== */

.dashboard-app{

    height:100vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}


/* ===================================================== */
/*             ردیف زیرین: نوار کناری + محتوای اصلی        */
/* ===================================================== */

.body-row{

    flex:1;

    display:flex;

    min-height:0;

    background:var(--jn-bg-0);
}

/* توی حالتِ روز، این لایه رو شفاف می‌کنیم تا گرادیانِ پشتِ body (بالاتر) دیده بشه */
:root[data-theme="light"] .body-row{
    background:transparent;
}


/* ===================================================== */
/*                  ستون محتوای اصلی                     */
/* ===================================================== */

.main{

    flex:1;

    min-width:0;

    padding:14px 18px;

    display:flex;

    flex-direction:column;

    gap:12px;

    overflow:hidden;
}


/* ===================================================== */
/*                   کارت پایه‌ی مشترک                    */
/* ===================================================== */

.card{

    background:var(--jn-bg-1);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:14px;
}

/* آزمایشیِ «جهتِ G»: کارت به‌جایِ سفیدِ توپر، نیمه‌شفاف با جلوه‌ی شیشه‌ایِ تار می‌شه تا   */
/* لکه‌های رنگیِ پشتِ body (بالاتر) از زیرش دیده بشن */
:root[data-theme="light"] .card{
    background:rgba(240,244,251,.62);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-color:rgba(255,255,255,.7);
    box-shadow:0 8px 28px rgba(16,26,46,.1);
}

.card-head{

    padding:14px 16px 10px;
}

.card-head h3{

    margin:0;

    font-size:13.5px;
}


/* ===================================================== */
/*         شبکه‌ی اصلی محتوا: نمودار + ستون کناری          */
/* ===================================================== */

.content-row{

    flex:1;

    min-height:0;

    display:flex;

    gap:14px;
}

.left-col{

    flex:3.4;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:14px;

    min-height:0;
}

.right-col{

    flex:0.9;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:14px;

    min-height:0;
}


/* ===================================================== */
/*                     موبایل                             */
/* ===================================================== */

@media(max-width:1100px){

    /* html هم (نه فقط body) overflow:hidden داره؛ چون html بالاترین سطحه،
       تا این باز نشه هیچ‌کدوم از override‌هایِ زیر اثری روی اسکرولِ واقعیِ
       صفحه نداره */
    html{

        height:auto;

        overflow-y:auto;
    }

    .dashboard-app{

        height:auto;

        min-height:100vh;

        overflow:visible;
    }

    body{

        overflow-y:auto;
    }

    /* .main هم overflow:hidden داره (بالاتر) و هیچ override‌ی موبایلی نداشت؛
       همین باعث می‌شد با وجودِ visible‌شدنِ dashboard-app/body، باز هم
       اسکرول توسطِ همین لایه قطع بشه */
    .main{

        overflow:visible;

        height:auto;
    }

    .content-row{

        flex-direction:column;
    }

    .body-row{

        height:auto;
    }

    /* صفحاتِ History/Wallet/News/Settings/Agents هر کدوم یه ناحیه‌یِ داخلیِ
       خودشون رو با flex:1;overflow-y:auto;min-height:0 دارن که فقط وقتی
       کار می‌کنه که زنجیره‌یِ والدها ارتفاعِ محدود (مثلِ دسکتاپ) داشته باشه.
       روی موبایل، چون کل زنجیره بالا آزاد شده، همین الگو یه «تله‌ی اسکرولِ
       تو‌در‌تو» می‌سازه (لمس توسطِ همین ناحیه جذب می‌شه، صفحه حرکت نمی‌کنه).
       این‌جا اسکرولِ داخلیشون رو خاموش می‌کنیم تا کلِ صفحه (html/body) به‌جاش
       اسکرول بخوره */
    .hist-app,
    .wal-app,
    .news-app,
    .set-app,
    .agt-app{

        flex:none !important;

        overflow-y:visible !important;

        min-height:0 !important;

        height:auto !important;
    }
}

/* چون .topbar روی موبایل (زیرِ ۹۰۰px، در Topbar(dashboard).css) position:fixed
   می‌شه، دیگه فضای عادیِ خودش رو از جریانِ صفحه نمی‌گیره؛ این‌جا با همون مرز
   همون فضا رو با padding-top جبران می‌کنیم تا محتوا زیرِ هدر پنهان نشه */
@media(max-width:900px){
    .body-row{

        padding-top:60px;
    }
}